.main-sidebar.debug {
    background-color: lime;
}
@media (min-width: 480px) { /* twbs-xs */
    .main-sidebar.debug {
        background-color: cyan;
    }
}
@media (min-width: 768px) { /* twbs-sm */
    .main-sidebar.debug {
        background-color: maroon;
    }
}
@media (min-width: 992px) { /* twbs-md */
    .main-sidebar.debug {
        background-color: lightgray;
    }
}
@media (min-width: 1200px) { /* twbs-lg */
    .main-sidebar.debug {
        background-color: black;
    }

    .main-sidebar.debug a,
    .main-sidebar.debug .anchor {
        color: white;
    }
}

.main-sidebar {
    top: 0;
    left: 0;
    z-index: 810;
    transition-duration: 0.2s;
    transition-property: transform;
    background-color: #ececec;
    overflow-y: auto;
}

.main-sidebar.closed {
    background-color: transparent;
}
.main-sidebar.closed li {
    display: none;
}

.main-sidebar.collapsed {
    width: 100%;
    height: 48px;
}
.main-sidebar.collapsed .sidebar-menu li {
    display: none;
}

.user-informations {
    padding: 12px 5px 12px 17px;
    display: inherit !important;
}
.main-sidebar.collapsed .user-informations {
    display: none !important;
}

.main-sidebar-button {
    width: 40px;
    padding: 6px 0;
    margin: 6px 0 6px 4px;
    z-index: 811;
}

.main-sidebar-navigation {
    transition: 0.2s;
}

.sidebar-menu,
.sub-menu {
    list-style: none;
    margin: 0;
    white-space: nowrap;
}
.sidebar-menu {
    padding: 0;
}
.sub-menu {
    padding: 0 0 0 10px;
    display: none;
}
.sub-menu.sub-menu-open {
    display: inherit;
}

.sidebar-menu li:not(.user-informations),
.sub-menu li:not(.user-informations) {
    position: relative;
    display: inherit;
    margin: 0;
    padding: 0;
}

.sidebar-menu .anchor {
    cursor: pointer;
}

.sidebar-menu a,
.sidebar-menu .anchor,
.sub-menu a,
.sub-menu .anchor {
    padding: 12px 5px 12px 17px;
    display: block;
    color: black;
}
.sidebar-menu a.active,
.sub-menu a.active,
.sidebar-menu .anchor.active,
.sub-menu .anchor.active {
    background-color: #dadada;
    color: black;
}

.menu-item-icon {
    display: inline-block;
}

.menu-item-title {
    margin-left: 14px;
    /*display: none;*/
}

.menu-item-dropdown {
    right: 10px;
    z-index: 13;
    opacity: 1;
    transition: 0.2s;
}

@media (min-width: 480px) { /* twbs-xs */
    .main-sidebar {
        position: fixed;
        height: 100%;
        min-height: inherit;
        width: calc(5 * 8.33333333%);
        /*max-width: 320px;*/
    }

    .main-sidebar.collapsed {
        width: 48px;
        min-height: 100%;
    }
    .main-sidebar.collapsed .sidebar-menu li:not(.user-informations) {
        display: inherit !important;
    }

    .menu-item-title {
        display: inline-block;
    }

    .main-sidebar.collapsed .menu-item-title {
        display: none !important;
    }
    .main-sidebar.collapsed .menu-item-dropdown {
        opacity: 0;
        /*display: none;*/
    }

    .content-wrapper {
        margin-left: 36px;
    }
}

@media (min-width: 768px) { /* twbs-sm */
    .main-sidebar {
        width: calc(4 * 8.33333333%);
    }
}

@media (min-width: 992px) { /* twbs-md */
    .main-sidebar {
        width: calc(3 * 8.33333333%);
    }

    .main-sidebar + .content-wrapper {
        width: calc(9 * 8.33333333%);
        margin-left: calc(3 * 8.33333333%);
    }
    .main-sidebar.collapsed + .content-wrapper {
        width: calc(100% - 48px);
        margin-left: 48px;
    }
}

@media (min-width: 1200px) { /* twbs-lg */
}

@media (min-width: 1400px) { /* beyond twbs-lg */
    .main-sidebar {
        width: calc(2 * 8.33333333%);
    }

    .main-sidebar + .content-wrapper {
        width: calc(10 * 8.33333333%);
        margin-left: calc(2 * 8.33333333%);
    }
}

.content-wrapper {
    transition: 0.2s;
}
